import { Text, View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";

import Money from "@/components/app/Money";
import Card from "@/components/common/Card";
import ByCol from "@/components/ui/ByCol";
import ByRow from "@/components/ui/ByRow";
import ByText from "@/components/ui/ByText";
import ListView from "@/components/app/ListView";

import useFetch from "@/hooks/useFetch";
import ApiFinance from "@/api/finance";

type Response = {
  /**
   * 列表数据
   */
  list: {
    /**
     * 地址
     */
    address: string;
    customerName: string;
    customerNo: string;
    /**
     * 质保金金额
     */
    qualityAmount: number;
    /**
     * 风险金金额
     */
    riskAmount: number;
  }[];
  /**
   * 质保金总额
   */
  qualityAmount: number;
  /**
   * 风险金总额
   */
  riskAmount: number;

  // 总质保金总额
  totalQualityAmount: number
  // 总风险金总额
  totalRiskAmount: number
};

export default () => {
  const { params } = useRouter();

  const { data } = useFetch<Response>(ApiFinance.quantityGoldBill, {
    showLoading: true,
    defaultParams: [{ intentCustomerId: Number(params.intentCustomerId) }],
  });

  const list = data?.list || [];
  return (
    <View className="p-3">
      <ByRow className="mb-3">
        <ByCol span={6}>
          <ByText size="sm" type="third">
            总风险金：
          </ByText>
          <Money size="sm" value={data?.totalRiskAmount} />
        </ByCol>
        <ByCol span={6}>
          <ByText size="sm" type="third">
            总质保金：
          </ByText>
          <Money size="sm" value={data?.totalQualityAmount} />
        </ByCol>
      </ByRow>

      <ListView isEmpty={list.length == 0}>
        {list.map((item, index) => (
          <Card className="mb-3" key={index}>
            <ByRow content="between">
              <Text>{item.customerName}</Text>
              <ByText size="sm" type="third">
                {item.address}
              </ByText>
            </ByRow>

            <ByRow className="mt-2">
              <ByCol span={6}>
                <ByText size="sm" type="second">
                  风险金：
                </ByText>
                <Money type="primary" value={item.riskAmount} />
              </ByCol>
              <ByCol span={6}>
                <ByText size="sm" type="second">
                  质保金：
                </ByText>
                <Money type="primary" value={item.qualityAmount} />
              </ByCol>
            </ByRow>
          </Card>
        ))}
      </ListView>
    </View>
  );
};
